import { useModel } from 'umi';
import { Role } from '@/utils/types.d';
import { PlusOutlined } from '@ant-design/icons';
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { createParkingspot, queryParkinglotNames } from '../service';
import type { CreateParkingspotType } from '../types';
import { parkingSpotIdReg } from '@/utils/utils';
import { queryCompanies } from '@/pages/SystemUser/service';
import { querySensorDeviceSn } from '@/pages/Devices/Patrol/service';

export default (props: { func: () => void }) => {
  const { initialState } = useModel('@@initialState');
  const userRole = initialState?.currentUser?.role;
  return (
    <ModalForm<CreateParkingspotType>
      title="手动创建泊位"
      width="40vw"
      layout="horizontal"
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 16 }}
      modalProps={{
        destroyOnClose: true,
      }}
      trigger={
        <Button type="primary">
          <PlusOutlined /> 手动创建泊位
        </Button>
      }
      onFinish={async (values) => {
        const res = await createParkingspot({
          ownerId: values.ownerId,
          deviceSn: values.deviceSn?.trim(),
          parkingLotId: values.parkingLotId?.trim(),
          parkingSpotId: values.parkingSpotId?.trim(),
        });
        if (res.success) {
          props.func();
          message.success({
            content: res.message,
            key: 'add_parkinglot',
          });
          return true;
        }
        message.error({
          content: res.message,
          key: 'add_parkinglot',
        });
        return false;
      }}
    >
      <ProFormText
        label="泊位编号"
        name="parkingSpotId"
        rules={[
          {
            required: true,
            validator: (_, val) => {
              if (!val || val?.length > 50 || !parkingSpotIdReg.test(val))
                return Promise.reject(new Error('泊位编号不满足要求: 字母,数字,_,-,<=50字符'));
              return Promise.resolve(val);
            },
          },
        ]}
        placeholder="请输入泊位编号"
      />
      {/* TODO:是否需要做成选择框 */}
      {/* <ProFormText
        label="设备编号"
        name="deviceSn"
        placeholder="请输入设备编号(可选)"
        rules={[
          {
            validator: (_, val) => {
              if (val && zhReg.test(val)) return Promise.reject(new Error('设备编号无效'));
              return Promise.resolve(val);
            },
          },
        ]}
      /> */}
      <ProFormSelect
        name="deviceSn"
        label="设备编号"
        showSearch
        debounceTime={300}
        placeholder="请选择地磁设备"
        rules={[{ message: '请选择地磁设备' }]}
        request={(val) => querySensorDeviceSn(val.keyWords)}
      />
      <ProFormSelect
        name="parkingLotId"
        label="选择路段"
        debounceTime={300}
        showSearch
        placeholder="请选择路段"
        rules={[{ required: true, message: '请选择路段' }]}
        request={(val) => queryParkinglotNames(val.keyWords)}
      />
      {userRole === Role.ADMIN && (
        <ProFormSelect
          name="ownerId"
          debounceTime={300}
          label="所属公司"
          showSearch
          placeholder="请选择泊位所属公司"
          request={(val) => queryCompanies(val.keyWords)}
        />
      )}
    </ModalForm>
  );
};
